<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩创作中心 - 稿件管理</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="icon" sizes="any" href="img/favicon.ico">
    <link rel="stylesheet" href="css/contributionManagement.css">
</head>

<body>
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <div class="logo">
            <img src="img/favicon.ico" alt="Bilibili">
            <div class="logo-text">创作中心</div>
        </div>

        <!-- 投稿按钮 -->
        <button id="uploadBtn" class="upload-btn">
            <i class="fas fa-plus"></i>
            <span>投稿</span>
        </button>

        <!-- 修改后的导航项 -->
        <a href="createCenter.html" class="nav-item" data-section="home">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active" data-section="content-management">
            <i class="fas fa-file-video"></i>
            <span>稿件管理</span>
        </a>
        <a href="commentManagement.html" class="nav-item">
            <i class="fas fa-comments"></i>
            <span>评论管理</span>
        </a>
        <a href="danmakuManagement.html" class="nav-item">
            <i class="fas fa-closed-captioning"></i>
            <span>弹幕管理</span>
        </a>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部工具栏 -->
        <div class="top-bar">
            <div class="search-box">
                <a href="index.html" style="text-decoration: none;color: #00A1D6;">
                            <span class="span1">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" class="zhuzhan-icon">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <span class="span2" style="vertical-align: top;">首页</span>
                        </a>
            </div>

            <div class="user-actions">
                <div class="notification">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="user-profile">
                    <div class="user-avatar">UP</div>
                    <div class="username">创作UP主</div>
                </div>
            </div>
        </div>

        <!-- 内容区域 - 稿件管理模块 -->
        <div class="content-area">
            <h1 class="section-title"><i class="fas fa-file-video"></i> 稿件管理</h1>

            <!-- 管理工具栏 -->
            <div class="management-header">
                <div class="filter-container">
                    <select class="filter-select">
                        <option>全部状态</option>
                        <option>已发布</option>
                        <option>审核中</option>
                        <!-- <option>草稿</option> -->
                    </select>

                    <select class="filter-select">
                        <option>全部分区</option>
                        <option>游戏</option>
                        <option>知识</option>
                        <option>科技</option>
                        <option>生活</option>
                        <option>音乐</option>
                        <option>娱乐</option>
                    </select>

                    <select class="filter-select">
                        <option>排序：最新发布</option>
                        <option>播放量最高</option>
                        <option>评论最多</option>
                        <option>点赞最多</option>
                    </select>
                </div>

                <div class="batch-actions">
                    <div class="search-container">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索稿件标题">
                    </div>

                    <div class="batch-select">
                        <input type="checkbox" id="selectAll">
                        <label for="selectAll">全选</label>
                    </div>

                    <div class="batch-buttons">
                        <button class="batch-btn delete">批量删除</button>
                    </div>
                </div>
            </div>

            <!-- 稿件列表 -->
            <div class="videos-table">
                <div class="table-header">
                    <div class="col-checkbox">选择</div>
                    <div class="col-thumbnail">封面</div>
                    <div class="col-title">标题</div>
                    <div class="col-status">状态</div>
                    <div class="col-stats">数据</div>
                    <div class="col-actions">操作</div>
                </div>
				<div id="allVideo">
	                
	            </div>
            </div>

            <!-- 分页控件 -->
            <div class="pagination">
                <div class="pagination-btn"><i class="fas fa-chevron-left"></i></div>
                <div class="pagination-btn active"></div>
                <div class="pagination-btn"></div>
                <div class="pagination-btn"></div>
                <div class="pagination-btn"></div>
                <div class="pagination-btn"></div>
                <div class="pagination-btn"></div>
                <div class="pagination-btn"><i class="fas fa-chevron-right"></i></div>
            </div>
        </div>
    </div>

    <!-- 投稿模态框 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">投稿新视频</div>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="videoTitle">视频标题</label>
                    <input type="text" id="videoTitle" placeholder="输入视频标题">
                </div>

                <div class="form-group">
                    <label for="videoDesc">视频简介</label>
                    <textarea id="videoDesc" placeholder="输入视频简介"></textarea>
                </div>

                <div class="form-group">
                    <label for="videoCategory">视频分区</label>
                    <select id="videoCategory">
                    
                    </select>
                </div>

                <div class="form-group">
                    <label>上传视频文件</label>
                    <div class="file-upload" id="videoUpload">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>点击或拖拽文件到此处上传</p>
                        <p class="small">支持MP4、MOV、AVI等格式，最大2GB</p>
                    </div>
                </div>

                <div class="form-group">
                    <label>上传封面图片</label>
                    <div class="file-upload" id="coverUpload">
                        <i class="fas fa-image"></i>
                        <p>点击或拖拽文件到此处上传</p>
                        <p class="small">支持JPG、PNG格式，建议尺寸1146x717</p>
                    </div>
                </div>
            	<input type="hidden" id="durationInSeconds" name="durationInSeconds">
            </div>
            <div class="modal-footer">
                <button class="btn-submit">发布投稿</button>
            </div>
        </div>
    </div>
    <div id="prompt"></div>
</body>
<script src="js/contributionManagement.js"></script>
<script>
let userNameB = $(".username")
let avatar = $(".user-avatar")
$.ajax({
	url:"userSession",
	type:"post",
	success:function(data){
		if(data.code == 200){
			userNameB.text(data.data.nickname)
			avatar.css({
				"background-image":"url("+data.data.avatarUrl+")",
				"background-size":"cover"
			})
			avatar.text("")
		}
	}
})
</script>
</html>